<template>
    <div class="contract_manage_list">
        <div class="model-title-css">
            检查部位
        </div>
        <div class="background_wrap public-flex-row">
            <div class="left-box WholeScroll">
                <el-tree class="Public-Tree-Class" :data="leftList" :props="defaultProps" ref='treeData' node-key="id"
                    :highlight-current='true' :default-expanded-keys="defaultTreeKey"
                    @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="right-box">
                <!-- 查询条件 以及 按钮 -->
                <div class="operate_wrap">
                    <div class="flex-center">
                        <el-button v-permission="permission.add" type="primary" size="small" class="add buildButtonStyle" round
                            @click="handleClickDeal({ type: 'build' })">
                            <i class="iconfont icon-icon_add"></i>&nbsp;新增根节点
                        </el-button>
<!--                      <el-button v-permission="permission.add" type="primary" size="small" class="add buildButtonStyle" round-->
<!--                                 @click="synchronizeResponsibilityAreas()">-->
<!--                        <i class="iconfont icon-icon_gz"></i>&nbsp;同步安全管理责任区域-->
<!--                      </el-button>-->
                    </div>
                    <div class="flex-center">
                    </div>
                </div>
                <!-- 列表 -->
                <div class="list_wrap WholeScroll">
                    <el-table :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName"
                        :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list"
                        tooltip-effect="dark" style="font-family: PingFangSC-Regular; font-size: 14px;"
                        :tree-props="{ children: 'children' }" row-key="id">
                        <el-table-column show-overflow-tooltip v-for="(item, i) in elTableList" :key="i"
                            :min-width="item.width" :prop="item.prop" :label="item.name" :align="item.align || 'center'">
                        </el-table-column>
                        <el-table-column prop="created_at" label="操作" width="250" fixed="right">
                            <template slot-scope="scope">
                                <el-button v-permission="permission.add" size="mini" class="menu_icon iconfont icon-icon_add action_color1"
                                    @click="handleClickDeal({ type: 'build', name: '子节点', detailId: scope.row.id, row: scope.row })">&nbsp;子节点</el-button>
                                <el-button v-permission="permission.edit" size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1"
                                    @click="handleClickDeal({ type: 'update', name: '编辑', detailId: scope.row.id, row: scope.row })">&nbsp;编辑</el-button>
                                <el-button v-permission="permission.del" size="mini" class="menu_icon iconfont icon-shanchu action_color2"
                                    @click="handleClickDeal({ type: 'delete', name: '删除', detailId: scope.row.id, row: scope.row })">&nbsp;删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="float: right; margin-top: 30px;" layout="prev, pager, next"
                        :page-size="search.pageSize" :total="search.total" :current-page="search.pageNo + 1"
                        :prev-text="tablePaginationPrev" :next-text="tablePaginationNext"
                        @current-change="paginationChange">
                    </el-pagination>
                </div>
            </div>
        </div>
        <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
    </div>
</template>
<script>
import {
    tableRowStyleGol,
    tableCellStyleGol,
    tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import projectSectionInfo from '@/api/buss/common'
import msgUtil from '@/utils/msgUtil'
import checkPart from "@/api/buss/checkPart"
import publicSearchData from '@/mixins/publicSearchData'
export default {
    name: 'checkPart',
    mixins: [publicSearchData],
    data() {
        return {
            permission:{
              add: ['100', '1009064:add'],
              show: ['100', '1009064:getOne'],
              edit: ['100', '1009064:edit'],
              del: ['100', '1009064:del'],
            },
            tableRowStyleName: tableRowStyleGol,
            tableCellStyleName: tableCellStyleGol,
            tableHeaderCellStyleName: tableHeaderCellStyleGol,
            tablePaginationPrev: '上一页',
            tablePaginationNext: '下一页',
            leftList: [],
            defaultTreeKey: [],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            list: [],
            search: {
                pageIndex: 0,
                pageNo: 0,
                pageSize: 10,
                total: 0,
                sectionId: '',
                pid: '0',
                projectId: ''
            }, // 搜索参数
            elTableList: [
                {
                    name:'检查部位名称',
                    prop: 'areaName',
                    width: '180',
                    align: 'left'
                },
           /*     {
                    name: '风险排查责任人',
                    prop: 'riskInvestigationUsers',
                    width: '180',
                },*/
                {
                    name: '备注',
                    prop: 'remark',
                    width: '180',
                },
            ],
            // 向详情子组件的传值
            postDetailData: {
                show: false,
                type: 'build',
                typeName: '新增',
            },
        }
    },
    components: {
        Detail: require(`./checkPart-detail`).default,
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            projectSectionInfo.getLeftProjectTree().then(res => {
                if (res.code === 200) {
                    res.data.forEach(item => {
                        item.children && item.children.forEach(item2 => {
                            item2.projectId = item.id
                        })
                    })
                    this.$set(this, 'leftList', res.data)
                    this.defaultTreeKey = []
                    this.defaultTreeKey.push(this.leftList[0].id)
                    this.$nextTick(()=>{
              if(this.$headerSearch){
                if(this.changeHeaderProject){
                  this.$refs['treeData'].setCurrentKey(this.changeHeaderProject);
                  if(this.defaultTreeKey){
                    this.defaultTreeKey.push(this.changeHeaderProject)
                  }
                  this.handleNodeClick({
                    id: this.changeHeaderProject
                  })
                }else {
                  this.defaultTreeKey.push(this.leftList[0].id)
                  this.$refs['treeData'].setCurrentKey(this.leftList[0].id);
                  if(this.defaultTreeKey){
                    this.defaultTreeKey.push(this.leftList[0].id)
                  }
                  this.handleNodeClick(this.leftList[0])
                }
              }else {
                this.defaultTreeKey.push(this.leftList[0].id)
                this.$refs['treeData'].setCurrentKey(this.leftList[0].id);
                if(this.defaultTreeKey){
                  this.defaultTreeKey.push(this.leftList[0].id)
                }
                this.handleNodeClick(this.leftList[0])
              }
            })
                } else {
                    this.$messageError(res.data.message)
                }
            }).catch(() => {
                this.$messageError('获取项目标段树失败')
            })
        },


        handleNodeClick(data) {
            if (data.type == 'sectionId') {
              this.search.sectionId = data.id
              this.search.projectId = data.projectId
              this.getList()
            }else{
              this.search.sectionId = ''
              this.search.projectId = data.id
              this.getList()
            }
        },
        // 切换列表
        paginationChange(index) {
            this.search.pageNo = index - 1
            this.getList()
        },
      getList(reload) {
        if (reload) {
          this.search.pageNo = 0
          delete this.search.id
          delete this.search.taskKeys
        }else{
          if(this.$route.query.id){
            this.search = {}
            this.search.pageIndex = 0
            this.search.pageSize = 10
            this.search.pageSum = 0
            this.search.pageNo = 0
            this.search.id=this.$route.query.id
          }

        }
        this.list =[]
        checkPart.getTablePage(this.search).then(res => {
          if (res.code == 200) {
            if(res.data.content.length>0){
              this.list = res.data.content
            }
            this.search.pageSum = res.data.totalElements
          }else {
            msgUtil.error2(res.data.message)
          }
        })

      },
      synchronizeResponsibilityAreas(){
        msgUtil.confirm('同步后现有的检查部位清单将被删除，确认同步吗？').then(res => {
          this.$httpPost('/buss/checkPart/getSynchronizeResponsibilityAreas', {
            sectionId: this.search.sectionId
          }).then(res => {
            if (res.code == 200) {
              this.getList()
              if(res.data.flag=='0'){
                msgUtil.success2("同步安全管理责任区域成功")
              }
              if(res.data.flag=='2'){
                msgUtil.error2("该标段下未找到安全管理责任区域数据")
              }
            }
            console.log(res)
          }).catch(res => {
            msgUtil.error2(res.data.message)
          })
        })



      },
        // 列表的操作流程
        handleClickDeal(res) {
            let type = res.type
            let detailId = res.detailId
            let row = res.row
            switch (type) {
                case 'build':
                    this.postDetailData = {
                        show: true,
                        type: 'build',
                        typeName: '新增',
                        params: {
                            detailId,
                            sectionId: this.search.sectionId,
                            pid: row?row.id:'0',
                            projectId: this.search.projectId
                        }
                    }
                    break
                // 修改
                case 'update':
                    // 显示详情弹窗
                    this.postDetailData = {
                        show: true,
                        type: 'edit',
                        typeName: '修改',
                        params: {
                            detailId,
                            sectionId: this.search.sectionId
                        }
                    }
                    break
                // 查看
                case 'show':
                    // 显示详情弹窗
                    this.postDetailData = {
                        show: true,
                        type: 'check',
                        typeName: '查看',
                        params: {
                            detailId,
                            sectionId: this.search.sectionId
                        }
                    }
                    break
                // 删除
                case 'delete':
                    if (detailId === '') {
                      msgUtil.error2('请先选择要删除的记录！')
                      return
                    }
                    msgUtil.confirm('确认删除该条数据?').then(res => {
                      let idlist=[]
                      idlist.push(detailId)
                      let param={
                        ids:idlist
                      }
                      checkPart.del(param).then(res=>{
                        if (res.code === 200) {
                          msgUtil.success2('删除成功!')
                          this.getList()
                        }else {
                          msgUtil.error2(res.data.message)
                        }
                      })
                    })
                    break
            }
        }


    },

}
</script>
<style scoped lang="scss">
.operate_wrap {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-button,
    .el-select,
    .el-input {
        border-radius: 4px;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        display: inline-block;
    }

    .el-date-editor--daterange {
        width: 300px;
    }

    .add {
        padding: 10px;
    }

    .delete {
        width: 88px;
    }

    .search {
        width: 88px;
        float: right;
        color: #fff;
        margin-left: 10px;
    }

    .el-select {
        width: 180px;
        float: right;
        margin-left: 10px;
    }

    .input {
        width: 180px;
        float: right;
        margin-left: 10px;
        color: #3E556E;
    }

    .number {
        color: #e1374c;
    }

}

.list_wrap {
    margin-top: 20px;
}

.model-title-css {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.list_wrap {
    margin-top: 20px;
}

.left-box {
    min-width: 300px !important;
    max-width: 350px !important;
    max-height: calc(100vh - 200px);
    border-right: 1px #e2e8ec solid;
    overflow: auto;

    p {
        cursor: pointer;
        font-size: 14px;
    }
}

.right-box {
    width: calc(100% - 300px);
    padding-left: 15px;
    flex-grow: 1;
}
</style>
